#{extends 'main.html'/}
<div id="container">
    <link href="@{'/public/stylesheets/user.css'}"  rel="stylesheet" type="text/css">
    <style type="text/css">
        #leftmenu li{padding: 0 0;}
        #leftmenu li:hover{background-color: #a52a2a;color: #f5f5f5}
        #leftmenu li a{margin: 0 0;padding: 0 40px;}
        #leftmenu li a:hover{text-decoration: none;color: #f5f5f5}
    </style>
    <div id="position">
        <a href="/" class="pos_now">首页</a> &gt; <a href="/account">我的帐户</a> &gt; ${activedMenu}
    </div>

    <div class="left">
        <div class="leftmenu_ttl">我的帐户</div>
        <div id="leftmenu">
            <div class="sub_ttl">
                <div class="st_title">账户中心<span></span></div>
            </div>
            <ul>
                <li><a href="@{Users.account()}">账户信息</a></li>
                <li><a href="@{Users.avatar()}">修改头像</a></li>
                <li><a href="@{Users.changePwd()}">修改密码</a></li>
            </ul>

            <div class="sub_ttl">
                <div class="st_title">交易中心<span></span></div>
            </div>
            <ul>
                <li><a href="/user/">我的订单</a></li>
                <li><a href="/user/coupon/">我的消费券</a></li>
                <li><a href="/user/card/">我的优惠券</a></li>
                <li><a href="/user/favorites/">我的收藏</a></li>
                <li><a href="/user/credit">账户余额</a></li>
                <li><a href="/user/refund/">退款记录</a></li>
            </ul>

            <div class="sub_ttl">
                <div class="st_title">系统中心<span></span></div>
            </div>
            <ul>
                <li><a href="#">系统信息</a></li>
                <li><a href="#">邮件订阅</a></li>
            </ul>
        </div>
    </div>


   #{doLayout /}

    <script type="text/javascript">
        $(function($){
            //动态为菜单设置为当前选中
            menuitems = $('#leftmenu li a');
            for(x=0;x<menuitems.length;x++){
                if($(menuitems[x]).html() == '${activedMenu}'){
                    $(menuitems[x]).parent().addClass('on');
                }
            }
            slide_li_width = $('#slide_content li').eq(0).width();
            slide_ul_width = $('#slide_content li').length * slide_li_width;
            scorll_len = slide_li_width*2;
            len = 0;
            $('#slide_content').css('width',slide_ul_width+'px');

            $("#next").click(function(){
                if(slide_ul_width > (len+scorll_len)){	len = scorll_len+len; }else{return;}
                $('#slide_content').animate({left:-len+'px'},'slow');
            });
            $("#prev").click(function(){
                if( len > 0){ len =  len-scorll_len;  }else{ return; }
                $('#slide_content').animate({left:-len+'px'},'slow');
            });
        });
    </script>

    <div class="clear"></div>
    ﻿</div>
</div>
